<template>
  <div>
    <list-transfer
      :selectList="selectList"
      select-placeholder="选择文章标签"
      :dataSource="disposeTransferList(dataSource, 'articleName', 'id')"
      v-model:inputValue="search.inputValue"
      v-model:selectValue="search.selectValue"
      v-model:value="articleIds"
      @select="confirmGetSelectList"
      @scroll="scollGetDataSource"
    ></list-transfer>
    <div>{{ articleIds }}</div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from 'vue';
import { disposeTransferList } from '@/utils/helper';
import ListTransfer from '@/components/list-transfer';
const getList = (
  { inputValue = '', selectValue = '' } = { inputValue: '', selectValue: '' },
  length = 1,
) => {
  const list = [];
  for (let index = 0; index < length * 10; index++) {
    list.push({
      articleName: `${index} + ${inputValue} + ${selectValue}`,
      id: `${index} + ${inputValue} + ${selectValue}`,
    });
  }
  return list;
};

/**
 * 将已经选中的选项筛选出
 **/
const disposeSelectList = (list, selectValue) => {
  const selectList = [];
  list.forEach(item => {
    const selectItem = selectValue.find(value => item.id === value);
    if (selectItem) {
      selectList.push(item);
    }
  });
  return selectList;
};
/**
 * 过滤已经选中的元素，避免重复添加
 **/
const filterSelect = (list, selectIds) =>
  list.filter(item => !selectIds.some(articleId => +articleId === item.id));

export default defineComponent({
  name: '',
  setup() {
    const state = reactive({
      selectList: [
        { labelName: '中国', id: 1 }, // 二次封装只能选择这两个字段
        { labelName: '美国', id: 2 },
      ],
      dataSource: getList(),
      page: 1,
      search: {
        inputValue: '',
        selectValue: '',
      },
      articleIds: [],
      isAll: false,
    });

    /**
     * 获取下拉列表
     **/
    const confirmGetSelectList = searchSelect => {
      state.selectList = [
        { labelName: searchSelect + '11', id: searchSelect + 1 },
        { labelName: searchSelect + '22', id: searchSelect + 2 },
      ];
    };

    /**
     * 下拉滚动获取数据
     **/
    const scollGetDataSource = args => {
      const clientHeight = args[1].target.clientHeight;
      const scrollTop = args[1].target.scrollTop;
      const scrollHeight = args[1].target.scrollHeight;
      if (clientHeight + scrollTop === scrollHeight && !state.isAll) {
        state.page++;
        // 保存已选中的列表元素，即使重新调用接口，但是已选中的列表元素不可删除，否则会出现选中后更新搜索条件，已选中的选项被清空
        const selectList = disposeSelectList(state.dataSource, state.articleIds);
        // 过滤选中列表中的元素，否则可能存在左右两边均有出现的可能
        const newList = getList(state.search, state.page);
        const list = filterSelect(newList, state.articleIds);
        state.dataSource = [...selectList, ...list];
        if (newList.length < 10) {
          state.isAll = true;
        }
      }
    };

    /**
     * 监听搜索变化
     **/
    watch(state.search, () => {
      state.page = 1;
      // 保存已选中的列表元素，即使重新调用接口，但是已选中的列表元素不可删除，否则会出现选中后更新搜索条件，已选中的选项被清空
      const selectList = disposeSelectList(state.dataSource, state.articleIds);
      // 过滤选中列表中的元素，否则可能存在左右两边均有出现的可能
      const newList = getList(state.search);
      const list = filterSelect(newList, state.articleIds);
      state.dataSource = [...selectList, ...list];
    });

    return {
      ...toRefs(state),
      confirmGetSelectList,
      scollGetDataSource,
      disposeTransferList,
    };
  },
  components: {
    ListTransfer,
  },
});
</script>
<style lang="less"></style>
